<template>
  <div class="app-container">
    <div style="display: flex;height: 100%">
      <div class="div-big" style="flex: 1; min-width:290px; height: 100%;">
        <div class="mb0" style="border-bottom: 1px #D0D0D066 dotted;padding-bottom: 5px">
          <span style="font-size: 14px">患者列表</span>
          <el-tooltip
            class="box-item"
            content="患者录入"
            effect="dark"
            placement="top"
          >
            <el-button style="float: right" type="primary" @click="patientEntry">
              <template #icon>
                <i-ep-plus/>
              </template>
            </el-button>
          </el-tooltip>
          <!--                            起止时间-->
          <el-row class="picker-data-time">
            <el-col :span="12">
              <el-date-picker
                v-model="beginTime"
                class=" beginTime select-height"
                placeholder="起始日期"
                style="margin-right: 5px;height:  30px; width: 100%"
                type="date"
                value-format="YYYY-MM-DD"
              />
            </el-col>
            <el-col :span="12">
              <el-date-picker
                v-model="endTime"
                class="select-height "
                placeholder="结束时间"
                style="height:  30px; width: 100%;"
                type="date"
                value-format="YYYY-MM-DD"
              />
            </el-col>
            <el-col :span="1">
              <el-tooltip content="刷新列表" effect="dark" placement="bottom">
                <el-button
                  style=" height:  30px;"
                  type="primary"
                  @click="patientRefresh"
                >
                  <template #icon>
                    <i-ep-search/>
                  </template>
                </el-button>
              </el-tooltip>
            </el-col>
          </el-row>
          <!--                            全科、我的患者-->
          <el-radio-group
            v-model="isMyPatient"
            class="mb5"
            style="width: 100%"
            @change="isMyPatientChange"
          >
            <el-radio
              key="0"
              :border="true"
              class=" select-height clinic-type-radio"
              style="width: 100%;margin-right: 5px;background-color: rgb(245, 234, 166)"
              value="0"
            >我的患者
            </el-radio>
            <el-radio
              key="1"
              :border="true"
              class="select-height clinic-type-radio"
              style="width: 100%;background-color: rgb(245, 234, 166)"
              value="1"
            >全科患者
            </el-radio>
          </el-radio-group>
          <!--                            就诊类型-->
          <el-radio-group v-model="form.clinicType" style="width: 100%" @change="isMyPatientChange">
            <el-radio border class="select-height" style="width: 100%;margin-right: 5px;" value="">
              全部 {{ patientCount.totality }} 人
            </el-radio>
            <el-radio border class="select-height" style="width: 100%;" value="1">
              待诊 {{ patientCount.waitDiagnosed }} 人
            </el-radio>
          </el-radio-group>
          <el-radio-group v-model="form.clinicType" style="width: 100%" @change="isMyPatientChange">
            <el-radio border class="select-height" style="width: 100%;margin-right: 5px;" value="2">
              已诊 {{ patientCount.diagnosed }} 人
            </el-radio>
            <el-radio border class="select-height" style="width: 100%;" value="3">
              未诊 {{ patientCount.undiagnosed }} 人
            </el-radio>
          </el-radio-group>
          <!-- 检索 -->
          <el-row class="search-box mt5">
            <el-col :span="12">
              <base-dept-tree
                class="search-box-select select-height"
                :org-id="userInfo.orgId"
                :placeholder="'开单科室'"
                :clearable="false"
                :value="form.deptId"
                :is-to-user-role="isToUserRole"
                @deptSelect="deptSelect"
              />
            </el-col>
            <el-col :span="12">
              <el-input
                v-model="form.itemInfo"
                class="select-height mb5 left-patient"
                clearable
                placeholder="姓名、门诊号"
                @input="clinicTypeChange"
              >
                <template #append>
                  <el-tooltip content="刷新列表" effect="dark" placement="bottom">
                    <el-button
                      style="float: right"
                      type="primary"
                      @click="patientRefresh"
                    >
                      <template #icon>
                        <i-ep-search/>
                      </template>
                    </el-button>
                  </el-tooltip>
                </template>
              </el-input>
            </el-col>
            <el-col :span="12"></el-col>
          </el-row>
        </div>
        <div class="infinite-list-wrapper" style="overflow-y: auto">
          <div
            v-infinite-scroll="load"
            :infinite-scroll-immediate="true"
            :infinite-scroll-disabled="disabled"
          >
            <div v-for="(patient, index) in patientList"
                 :id="'patientCard-' + index"
                 :key="patient.id" class="list-item box-card left-small-card"
                 @click.stop="patientClick(patient, index)">
              <el-row class="ml10 mr10" style="margin-bottom: 0">
                <el-col :span="6" style="margin-bottom: 4px"
                ><span class="fz15">{{
                    patient.name
                  }}</span></el-col
                >
                <el-col :span="4"><span class="fz12 infinite-list-card-sex"
                >{{ patient.ageAll }}</span
                ></el-col>
                <el-col :span="1" class="fz12 infinite-list-card-sex">
                  {{
                    dictStore.getMateDictInfo(dictDataMap['sys_user_sex'], patient.sex)
                      .dictValue === '1'
                      ? '男'
                      : '女'
                  }}
                </el-col>
                <el-col :span="13" class="infinite-list-card-isAll" style="cursor: pointer;"
                        @click.stop="patientClick(patient, index)">
                  全部信息 ∨
                </el-col>
                <el-col style="border-top: 1px solid #ECEEF3; margin: 2px 0"></el-col>
                <el-col :span="18" style="margin-bottom: 4px">
                  <span class="fz12">门诊号: {{ patient.clinicNo }}</span>
                </el-col>
                <el-col :span="6">
                  <el-button
                    v-if="patient.clinicType === '1'"
                    style="float: right; width: 32px; height: 17px"
                    type="primary"
                    @click.stop="referralFun(patient)"
                  >转诊
                  </el-button>
                </el-col>
                <el-col :span="17" style="margin-bottom: 4px">
                  <span class="fz12">接诊医生: {{ patient.doctorName }}</span>
                </el-col>
                <el-col :span="7">
                  <span class="fz12"
                        style="margin-bottom: 4px; display: inline-block; background: #349D5F; padding: 1px 6px; line-height:18px;border-radius:5px; float: right">
                    {{
                      dictStore.getMateDictInfo(
                        dictDataMap["medical_insurance_type"],
                        patient.chargeType
                      )
                        ? dictStore.getMateDictInfo(
                          dictDataMap["medical_insurance_type"],
                          patient.chargeType
                        ).dictLabel
                        : ""
                    }}</span
                  >
                </el-col>
                <el-col :span="17" style="margin-bottom: 4px">
                  <span class="fz12">接诊科室: {{ patient.deptName }}</span>
                </el-col>
                <el-col :span="7">
                  <span class="fz12"
                        style="display: inline-block; background: #FF882D; padding: 1px 6px; line-height:18px;border-radius:5px;float: right">
                    {{
                      dictStore.getMateDictInfo(
                        dictDataMap["patient_medical_source"],
                        patient.source
                      )
                        ? dictStore.getMateDictInfo(
                          dictDataMap["patient_medical_source"],
                          patient.source
                        ).dictLabel
                        : ""
                    }}</span
                  >
                </el-col>
                <el-col :span="18" class="infinite-list-card-zhenduan" style="margin-bottom: 4px">
                  <span class="fz12">门诊诊断: {{ patient.diagnosisStr }}</span>
                </el-col>
                <el-col :span="18" style="margin-bottom: 4px">
                  <span class="fz12">就诊日期: {{ patient.visitDate }}</span>
                </el-col>
                <el-col :span="18" style="margin-bottom: 4px">
                  <span class="fz12">联系电话: {{ patient.phone }}</span>
                </el-col>
                <el-col :span="18" style="margin-bottom: 4px">
                  <span class="fz12">身份证号: {{ patient.idNo }}</span>
                </el-col>
                <el-col :span="18" style="margin-bottom: 4px">
            <span class="fz12">婚姻：
               {{
                dictStore.getMateDictInfo(
                  dictDataMap["marriage_dict"],
                  patient.marriage
                )
                  ? dictStore.getMateDictInfo(
                    dictDataMap["marriage_dict"],
                    patient.marriage
                  ).dictLabel
                  : ""
              }}
              </span>
                </el-col>
              </el-row>
            </div>
          </div>
          <p v-if="loading && patientList.length < count && patientList.length != 0" class="div-p">加载中...</p>
          <p v-if="noMore || patientList.length === count" class="div-p"> 没有更多数据了</p>
        </div>
      </div>
      <div class="div-big" style="flex: 6;height: 100%;border-left: none;">
        <el-empty
          v-if="!patientInfo"
          :image-size="300"
          description="请先选择左侧患者后，再进行诊疗操作"
        />
        <right-patient
          v-else
          ref="rightPatientRef"
          :patient-info="patientInfo"
          :is-to-convenient-outpatient="isToConvenientOutpatient"
          :is-otc-outpatient="isOtcOutpatient"
          @closeLoading="closeLoading"
        />
      </div>
    </div>
    <el-dialog v-model="enterOpen" :close-on-click-modal="false" append-to-body title="患者录入" width="95%">
      <register-form ref="registerFormRef" :is-otc-outpatient="isOtcOutpatient" :org-id="userInfo.orgId"
                     :is-to-convenient-outpatient="isToConvenientOutpatient"
                     @save-register="saveRegister"/>
      <template #footer>
                <span class="dialog-footer">
                 <el-button class="ml10" type="success"
                            @click="enterOk">
                            录入确认
                    </el-button>
                  <el-button @click="cancel">取 消</el-button>
                </span>
      </template>
    </el-dialog>
    <el-dialog v-model="referralOpen" :close-on-click-modal="false" append-to-body title="患者转诊" width="30%">
      <el-form ref="referralFormRef" :model="referralForm" label-width="80px">
        <el-form-item label="转诊科室" prop="referralDeptId">
          <base-dept-tree ref="baseDeptTreeRef" :clinicalSignStr="'5,6,9,10'"
                          :org-id="userInfo.orgId"
                          :value="referralForm.referralDeptId"
                          style="width: 100%" @dept-select="referralDeptIdSelect"/>
        </el-form-item>
        <el-form-item label="转诊医生" prop="referralDoctorId">
          <user-select ref="userSelectRef" v-model="referralForm.referralDoctorId"
                       :org-id="userInfo.orgId"
                       style="width: 100%" @user-change="referralDoctorIdChange"/>
        </el-form-item>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                 <el-button class="ml10" type="success"
                            @click="referralOk">
                            确认转诊
                    </el-button>
                  <el-button @click="referralCancel">取 消</el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import rightPatient from "./rightPatient.vue";
import {getPatientCount, queryPatientInfo, referral, selectPageClinicMaster} from "@/api/patient/clinicMaster";
import {useUserStoreHook} from "@/store/modules/user";
import {useDictStoreHook} from "@/store/modules/dict";
import RegisterForm from "@/views/finance/register/registerForm.vue";
import {addRegisterAndPatient} from "@/api/finance/registPayType.ts";

import {useRoute} from "vue-router";
import eventBus from "@/utils/eventBus.ts";

const route = useRoute()
const dictStore = useDictStoreHook();
const {proxy} = getCurrentInstance() as any
const isToUserRole = ref<number>(2)
const props = defineProps({
  // 是否来自便捷门诊
  isToConvenientOutpatient: {
    type: Boolean,
    default: false
  },
  // 是否来在OTC门诊  默认不是来自otc门诊
  isOtcOutpatient: {
    type: Boolean,
    default: false
  }
})
let dictDataMap = ref(
  dictStore.isTypeGetData(
    "patient_medical_source",
    "medical_insurance_type",
    "sys_user_sex",
    "clinic_type",
    "marriage_dict"
  )
);
// 监听路由变化
// watch(() => route.query, (query) => {
//   if (query.toToggleDept ==='1') {
//     alert(1)
//     form.value.deptId = proxy.$currentSelectDept
//     patientRefresh()
//   }
// });
const useUserStore = useUserStoreHook();
// 是否 我的患者 默认是 0
const isMyPatient = ref<String>("0");
// 登录用户信息
const userInfo = <UserInfoBusi>useUserStore.user.userInfo;
const patientList = ref<any>([]);
const patientCount = ref<any>({});
const patientInfo = ref<any>();
const rightPatientRef = ref();
// 转诊科室form
const referralFormRef = ref();
const enterOpen = ref(false)
// 患者转诊
const referralOpen = ref(false)
const registerFormRef = ref()
const date = proxy.$parseTime(new Date(), "{y}-{m}-{d} ");
const form = ref<any>({
  pageNum: 1 as number,
  pageSize: 10,
  // 就诊类型 待诊 已诊 未诊
  clinicType: "",
  itemInfo: "",
  orgId: userInfo.orgId,
  visitDate: proxy.$parseTime(new Date(), "{y}-{m}-{d}"),
  doctorId: userInfo.userId,
  deptId: proxy.$currentSelectDept || "",
});

const referralForm = ref<any>({
  orgId: userInfo.orgId,
  referralDeptId: "",
  referralDoctorId: "",
});

const referralRule = ref<any>({
  referralDeptId: [
    {
      required: true,
      message: "请选择转诊科室",
      trigger: "change",
    },
  ],
  referralDoctorId: [
    {
      required: true,
      message: "请选择转诊医生",
      trigger: "change",
    },
  ],
});
const count = ref(1)
const loading = ref(false)
const noMore = computed(() => count.value === patientList.value.length)
const disabled = computed(() => loading.value || noMore.value)

const beginTime = ref(date)
const endTime = ref(date)

const dateRange = ref([beginTime.value + " 00:00:00", endTime.value + " 23:59:59"]);

function deptSelect(node: any) {
  if (!node) {
    form.value.deptId = "";
  } else {
    form.value.deptId = node.deptId;
  }
}

// 全部信息/收起
function clickShowAll(item, index) {
  // patientClick(item, index)
  const elementDiv = document.querySelectorAll(".infinite-list-card-isAll");
  const clickElement = elementDiv[index]
  // let elementDivParent =  elementDiv[index].parentNode?.parentNode as HTMLElement;
  // if (index === )
  elementDiv && elementDiv.forEach((_item, _index) => {
    let elementDivParent = elementDiv[_index].parentNode?.parentNode as HTMLElement;
    if (clickElement.innerText === '全部信息 ∨' && index === _index) {
      _item.innerText = '收起 ∧'
      // let zhenduanHeight = document.querySelectorAll(".infinite-list-card-zhenduan")[index]
      elementDivParent.style.minHeight = '225px';
      elementDivParent.style.overflow = 'auto';
    } else {
      _item.innerText = '全部信息 ∨'
      elementDivParent.style.height = '105px';
      elementDivParent.style.minHeight = '105px';
      elementDivParent.style.overflow = 'hidden';
    }
  })

}

/** 患者列表刷新 */
function patientRefresh() {
  getPatientCountFun();
  patientList.value = []
  count.value = 1
  patientInfo.value = undefined
  form.value.pageNum = 1
  load()
}

const load = () => {
  loading.value = true
  form.value.clinicId = ""
  form.value.id = ""
  form.value.visitDate = null
  tissueDateRange()
  // 只有未诊的查询24小时患者。
  // if (form.value.clinicType != "1") {
  //   form.value.visitDate = null
  // } else {
  //   form.value.visitDate =proxy.$parseTime(new Date(), "{y}-{m}-{d}")
  // }
  selectPageClinicMaster(proxy.$addDateRange(form.value, dateRange.value)).then((res: any) => {
    if (res.rows.length > 0) {
      count.value = res.total
      patientList.value = patientList.value.concat(res.rows)
      form.value.pageNum += 1
      loading.value = false
    }
  });
}

function isNull(value) {
  return !value ? "" : value
}

/**
 * 组织时间段
 */
function tissueDateRange() {
  let beginTimeThis = !isNull(beginTime.value) ? null : isNull(beginTime.value) + " 00:00:00"
  let endTimeThis = !isNull(endTime.value) ? null : isNull(endTime.value) + " 23:59:59"
  dateRange.value = [beginTimeThis, endTimeThis]
}

/** 获取患者总数量 同步方法*/
async function getPatientCountFun() {
  return new Promise((resolve) => {
    // form.value.deptId = proxy.$currentSelectDept
    form.value.clinicId = ""
    form.value.id = ""
    form.value.visitDate = null
    tissueDateRange()
    // // 只有未诊的查询24小时患者。
    // if (form.value.clinicType != "1") {
    //   form.value.visitDate = null
    // } else {
    //   form.value.visitDate =proxy.$parseTime(new Date(), "{y}-{m}-{d}")
    // }
    getPatientCount(proxy.$addDateRange(form.value, dateRange.value)).then((res: any) => {
      patientCount.value = res.data;
      resolve(res.data);
    });
  });
}

function closeLoading() {
  // loading.value = false;
}

// otc门诊、便捷门诊 患者点击 调用父级事件
const emits = defineEmits(["otherClick"])

/** 左侧患者列表选中事件 */
function patientClick(item, index) {
  clickShowAll(item, index)
  proxy.$patientClickCssChange(index, patientList.value);
  form.value.clinicId = item.id
  form.value.id = item.id
  const data = {
    clinicId: form.value.clinicId,
    id: form.value.id,
    orgId: form.value.orgId,
    // 点击患者卡片的时候，将接诊类型设置为空
    clinicType: "",
    doctorId: form.value.doctorId,
    deptId: form.value.deptId,
  }
  queryPatientInfo(data).then((res: any) => {
    patientInfo.value = res.data;
    nextTick(() => {
      // 设置全局ClinicId
      proxy.$setClinicId(patientInfo.value.id);
      // 设置全局patientId
      proxy.$setPatientId(patientInfo.value.patientId);
      // 设置全局门诊、住院属性
      proxy.$setInoroutFlag("4");
      proxy.$setClinicInfo(patientInfo.value);
      nextTick(() => {
        rightPatientRef.value.handleClick();
        emits("otherClick")
      });
    })
  })
}


/** 是否我的患者点击事件 */
function isMyPatientChange() {
  if (isMyPatient.value === "0") {
    // 我的
    form.value.doctorId = userInfo.userId;
  } else {
    // 全科
    form.value.doctorId = "";
  }
  patientRefresh();
}

/** 查询触发事件 */
function clinicTypeChange() {
  patientRefresh();
}

/**
 * 患者录入
 */
function patientEntry() {
  enterOpen.value = true;
}

/**
 * 患者录入保存
 * @param form
 */
function saveRegister(form: any) {
  ElMessageBox.confirm("确定要录入吗？", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      let submitForm: any = {};
      form.doctorId = userInfo.userId;
      form.doctorName = userInfo.nickName;
      form.deptId = userInfo.loginDeptId;
      form.deptName = userInfo.loginDeptName;
      // 挂号
      form.medicalSource = "1";
      //便捷门诊
      if (props.isToConvenientOutpatient === true) {
        form.medicalSource = "2";
      }
      //OTC
      if (props.isOtcOutpatient === true) {
        form.medicalSource = "3";
      }
      // 是否诊间录入 1 是  :   2 否
      submitForm.isRoomEntry = "1"
      submitForm.patientInfo = form;
      submitForm.clinicMasterCostBo = {};
      submitForm.orgId = form.orgId;
      addRegisterAndPatient(submitForm).then((res: any) => {
        nextTick(() => {
          registerFormRef.value.resetPatient()
        })
        if (res.code === 200) {
          nextTick(() => {
            registerFormRef.value.resetPatient()
          })
          ElMessage.success("录入成功");
          patientRefresh()
          enterOpen.value = false
        } else {
          patientRefresh()
          ElMessage.success("录入失败");
        }
      });
    })
}

// 取消按钮
function cancel() {
  enterOpen.value = false;
}

/**
 * 录入确认
 */
function enterOk() {
  // 患者信息校验
  registerFormRef.value.saveRegisterValidate()
}

/**
 * 便捷门诊收费后刷新中间区域事件
 */
function convenientRefresh() {
  nextTick(() => {
    rightPatientRef.value.convenientRefresh()
  })
}

/**
 * 转诊科室弹出框取消事件
 */
function referralCancel() {
  referralOpen.value = false
  referralForm.value.id = ""
  referralForm.value.referralDeptId = ""
  referralForm.value.referralDoctorId = ""
}

/**
 * 转诊科室选择事件
 */
function referralDeptIdSelect(obj) {
  referralForm.value.referralDeptId = obj.deptId
}

/**
 * 转诊医生选择事件
 * @param obj
 */
function referralDoctorIdChange(obj) {
  referralForm.value.referralDoctorId = obj.userId
}

/**
 * 转诊
 */
function referralFun(patient) {
  ElMessageBox.confirm("确定要转科吗？", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      referralForm.value.id = patient.id
      referralForm.value.patientId = patient.patientId
      referralOpen.value = true
    })
}

function referralOk() {
  (referralFormRef.value as any).validate(valid => {
    if (valid) {
      referral(referralForm.value).then((res: any) => {
        if (res.code === 200) {
          ElMessage.success("转诊成功");
          referralOpen.value = false
          referralForm.value.id = ""
          referralForm.value.referralDeptId = ""
          referralForm.value.referralDoctorId = ""
          patientRefresh()
        } else {
          ElMessage.success("转诊失败");
        }
      });
    }
  })
}

onMounted(() => {
  // 1. 组件挂载时初始化：从 Pinia 状态读取已选中科室（处理路由刷新场景）
  // 如果用户已选择科室（如页面刷新后状态保留），直接加载数据
  if (useUserStore.user.currentSelectDept) {
    // 将全局状态中的科室 ID 同步到本地组件状态
    form.value.deptId = useUserStore.user.currentSelectDept
    patientRefresh();
  }
  // 2. 监听科室切换事件（处理用户主动切换科室场景）
  // 通过事件总线监听 Navbar 组件触发的科室切换事件
  eventBus.on('navbarDeptChange', (newDeptId: string) => {

    // 更新本地组件的科室 ID 状态
    form.value.deptId  = newDeptId;
    patientRefresh();
  });
});
// 组件卸载时移除监听（避免内存泄漏）
onUnmounted(() => {
  eventBus.off('navbarDeptChange');
});



defineExpose({
  convenientRefresh
})
</script>
<script lang="ts">
export default {
  name: "ClinicDoctor",
};
</script>

<style lang="scss" scoped>

.app-container .el-radio-group {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  margin-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 10px;
}

.app-container .el-radio-group .el-radio {
  margin-right: 0;
}

.app-container .picker-data-time {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding-top: 10px;
}

.app-container .search-box {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding-top: 5px;
}

.app-container .search-box .search-box-select {
  margin-right: 5px;
}

//患者列表滚动条整体高度
.infinite-list-wrapper {
  height: calc(100% - 255px);

  .infinite-list-card-isAll {
    text-align: right;
    font-weight: 400;
    font-size: 12px;
    color: #4E64F6;
  }

  .infinite-list-card-sex {
    color: #98999B;
    line-height: 20px;
  }

  .patient-click-div {
    overflow-y: auto;

    .infinite-list-card-isAll {
      color: #ffffff;
      line-height: 20px;
    }

    .infinite-list-card-sex {
      color: #ffffff;
      line-height: 20px;
    }
  }
}

.infinite-list-wrapper .list {
  padding: 0;
  margin: 0;
}

.infinite-list-wrapper .list-item {
  height: 105px;
  overflow: hidden;
  text-overflow: clip;
  background-color: rgba(255, 255, 255, 0.4);
  border: 1px solid #027687;
  border-radius: 5px;
}

.app-container .infinite-list-wrapper .box-card {
  padding: 5px 0;
}

.div-p {
  color: #4ba2f0;
  font-size: 15px;
  justify-content: center;
  display: flex;
  margin: 8px 0 8px 0
}

.div-big {
  border: 1px solid #027687;
  min-width: 240px;
  border-radius: 5px;
  padding: 5px 10px;
}

/* .clinic-type-radio {
  margin-right: 14px;
  margin-left: -9px;
} */

:deep(.left-patient > .el-input-group__append) {
  background-color: var(--el-color-primary) !important;
  color: #ffffff;
}

:deep(.select-height ) {
  height: 30px;
  background-color: rgb(238, 240, 255);

  .el-input__wrapper {
    background-color: rgb(238, 240, 255);
  }


}
</style>
